import React, { useEffect, useState } from 'react'

import dayjs from 'dayjs'

import { Modal } from 'antd';

import { paper, cate } from '../axiosAPI/lzx'

import { Input, Button } from 'antd'

import { SearchOutlined, SyncOutlined } from '@ant-design/icons'

import { useNavigate } from 'react-router-dom'

import '../scss/Lzx.scss'

export default function lzx_Home() {
  const navigate = useNavigate()

  const [data, setData] = useState([])
  const [clazz, setClazz] = useState([])

  const [name, setName] = useState('')

  const [select, setSelect] = useState()
  const [n, setN] = useState()

  const [isModalOpen, setIsModalOpen] = useState(false)
  const showModal = (name) => {
    setIsModalOpen(true);
    setN(name)
  }

  const handleOk = () => {
    setIsModalOpen(false);
    if (select) {
      navigate('/home/paper', { state: { va1: select, n: n } })
    } else {
      alert('请选择班级！！！')
    }

  };
  const handleCancel = () => {
    setIsModalOpen(false);
  };

  useEffect(() => {
    getData()
    getClazz()
  }, [])

  const getData = async () => {
    const { data: { code, data } } = await paper({ name })
    if (code === 200) {
      setData(data)
    }
  }
  const getClazz = async () => {
    const { data: { code, data } } = await cate()
    if (code === 200) {
      setClazz(data)
    }
  }

  return (
    <div id='home'>
      <div className='box'>
        <div className='header'>

          <Input placeholder="请输入试卷名称" onPressEnter={(e) => { getData() }} value={name} onChange={(e) => setName(e.target.value)} style={{ width: 200 }} />

          <Button type="primary" icon={<SearchOutlined />} onClick={() => { getData() }}>查询</Button>
          <Button icon={<SyncOutlined />} onClick={() => { setName(''); setMajor('') }}>重置</Button>
        </div>
        <div className='content'>
          <table>
            <thead style={{ backgroundColor: '#F6F9FF' }}>
              <tr>
                <th>序号</th>
                <th>试卷名称</th>
                <th>开始时间-结束时间</th>
                <th>及格分数</th>
                <th>总分</th>
                <th>出题人</th>
                <th>状态</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              {data.map((item, index) => (
                <tr key={index}>
                  <td>{index + 1}</td>
                  <td>{item.name}</td>
                  <td>{item.time.map(item => (dayjs(item).format('YYYY-MM-DD HH:mm:ss'))).join(' - ')}</td>
                  <td>{item.pass_score}</td>
                  <td>{item.out}</td>
                  <td>{item.creator}</td>
                  <td>
                    <div style={{ display: 'flex', gap: '7px', justifyContent: 'center', alignItems: 'center' }}>
                      <p>{item.time[1] > new Date() ? '进行中' : '已结束'}</p>
                    </div>
                  </td>
                  <td>
                    <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
                      <p style={{ color: '#5DC5FF', cursor: 'pointer' }} onClick={() => { showModal(item.name) }}>阅卷</p>
                    </div>
                  </td>
                </tr>
              ))}
              <Modal title="选择班级进行阅卷" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
                <div className='class'>
                  <select value={select} onChange={(e) => setSelect(e.target.value)} style={{ width: 200, height: 30, borderRadius: 5 }}>
                    <option value=''>请选择班级</option>
                    {clazz.map((item, index) => (
                      <option key={index} value={item.name}>{item.name}</option>
                    ))}
                  </select>
                </div>
              </Modal>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  )
}
